@property --progress {
  label {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
}
@property --progress2 {
  label {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
}
label [type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  outline: 0;
  background-color: transparent;
  width: 400px;
  overflow: hidden;
  height: 20px;
}
label [type=range]::-webkit-slider-runnable-track {
  height: 20px;
  background: linear-gradient(#9747ff 0 0) 0 0/calc(var(--progress) * 1% + 20px * (50 - var(--progress)) / 100) 100% no-repeat #eee;
  border-radius: 24px;
}
label [type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #9747ff;
  view-timeline: --slider inline;
  anchor-name: --thumb;
}
label.slider {
  position: relative;
  timeline-scope: --slider;
  animation: slider linear 3s reverse;
  animation-timeline: --slider;
  animation-range: contain;
}
label.slider .tooltip {
  position-anchor: --thumb;
  position: absolute;
  margin: 0 0 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px;
  color: #f0f0f0;
  background-color: #333;
  transform-origin: center bottom;
  rotate: calc((var(--progress2) - var(--progress)) * 2deg);
  filter: drop-shadow(4px 4px 4px rgba(50, 50, 50, 0.3));
  --progress2: var(--progress);
  transition: --progress2 0.1s ease-out;
}
label.slider .tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
label.slider .tooltip::after {
  content: counter(num);
  counter-reset: num var(--progress);
}
@keyframes slider {
  to {
    --progress: 100;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}

.custom-1 {
  width: 180px;
  height: 180px;
  background: radial-gradient(40px at 40px 40px, transparent calc(97% - 6px), #df73a0 calc(100% - 6px) 98%, transparent), linear-gradient(#df73a0, #df73a0), linear-gradient(#df73a0, #df73a0), linear-gradient(#df73a0, #df73a0), linear-gradient(#df73a0, #df73a0);
  background-position: -40px -40px, 39px 0, 39px 100%, 0 39px, 100% 39px;
  background-size: 100% 100%, calc(100% - 78px) 6px, calc(100% - 78px) 6px, 6px calc(100% - 78px), 6px calc(100% - 78px);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.mask-inset-circle {
  width: 200px;
  height: 180px;
  background: linear-gradient(45deg, #2179f5, #e91e63);
  -webkit-mask: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
          mask: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 70% 70%;
          mask-size: 70% 70%;
  -webkit-mask-position: right bottom, left top, right top, left bottom;
          mask-position: right bottom, left top, right top, left bottom;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  animation: ballMoveX 3s linear forwards, ballMoveY 3s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
  animation-composition: add;
}
@keyframes ballMoveX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}
@keyframes ballMoveY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(500px);
  }
}

.filed {
  --lawn: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.5) 10% 100%)
    center / 10% 100%;
  --dj: linear-gradient(to right, #43a63c calc(18em - 2px), transparent 0) 0
      center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x,
    linear-gradient(to right, #fff 18em, transparent 0) 0
      center/calc(100% - 18em) 44em repeat-x;
  --sj: linear-gradient(to right, #43a63c calc(6em - 2px), transparent 0) 0
      center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x,
    linear-gradient(to right, #fff 6em, transparent 0) 0 center/calc(100% - 6em)
      20em repeat-x;
  --door: linear-gradient(to right, #43a63c calc(3em - 4px), transparent 0)
      calc(-3em + 2px) center / calc(100% + 3em) calc(8em - 4px) repeat-x,
    linear-gradient(to right, #fff 3em, transparent 0) -3em center/calc(
        100% + 3em
      ) 8em repeat-x;
  --ml: linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
  --mc: radial-gradient(
      closest-side circle,
      #fff 2px,
      transparent 0 calc(100% - 2px),
      #fff 0 100%,
      transparent 0
    )
    center / 20em no-repeat;
  --ar: radial-gradient(
      circle at 12em center,
      transparent calc(10em - 2px),
      #fff 0 10em,
      transparent 0
    )
    0 center/calc(100% - 24em) 100%;
  --point: radial-gradient(circle at 12em center, #fff 2px, transparent 0) 0
    center/calc(100% - 24em) 100%;
  --co: radial-gradient(
      circle at 1em 1em,
      transparent calc(1em - 2px),
      #fff 0 1em,
      transparent 0
    ) -1em -1em/100% 100% content-box;
  font-size: 5px;
  width: 115em;
  height: 74em;
  background: var(--lawn), var(--co), var(--point), var(--door), var(--sj), var(--dj), var(--ar), var(--ml), var(--mc), #43a63c;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
  outline: 2px solid #fff;
  outline-offset: -5em;
  border: 5em solid transparent;
}

.text {
  -webkit-text-stroke: 6px rgb(51, 51, 51);
}